<template>
  <div class="demo-icon">
    <ul>
      <li v-for="icon in icons" :key="icon">
           <p><cv-icon :icon="icon"/></p>
           <p>{{icon}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import icons from '../../../src/packages/icon/icons/index.json'

export default {
  name: "icon",
  data(){
    return {
      icons
    }
  }
};
</script>

<style lang="scss">
.demo-icon{
  ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    li{
      flex: 0 0 18%;
      list-style: none;
      text-align: center;
      margin: 10px;
      padding: 10px;
      box-shadow: 2px 2px 5px #ddd;
      &:hover{
        background-color: #f9f9f9;
      }
      p:first-child{
        font-size: 30px;
      }
      p:last-child{
        color: #999;
        font-size: 12px;
      }
    }
  }
}
</style>
